<!DOCTYPE html>
<html>
<head>
<title>Resistor Network Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="350" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters for the drawing
    const numSquares = 4;
    const sideLength = 100;
    const startX = (canvas.width - numSquares * sideLength) / 2;
    const topY = 100;
    const bottomY = topY + sideLength;

    // Set drawing styles
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // --- Draw the grid ---
    ctx.beginPath();

    // Draw top horizontal line
    ctx.moveTo(startX, topY);
    ctx.lineTo(startX + numSquares * sideLength, topY);

    // Draw bottom horizontal line
    ctx.moveTo(startX, bottomY);
    ctx.lineTo(startX + numSquares * sideLength, bottomY);

    // Draw vertical lines
    for (let i = 0; i <= numSquares; i++) {
        const x = startX + i * sideLength;
        ctx.moveTo(x, topY);
        ctx.lineTo(x, bottomY);
    }

    // Apply the drawing to the canvas
    ctx.stroke();


    // --- Draw the labels ---
    
    // Set font for labels 'A' and 'B'
    ctx.font = 'italic 28px "Times New Roman"';
    
    // Draw label 'A'
    ctx.fillText('A', startX - 40, topY + 10);

    // Draw label 'B'
    ctx.fillText('B', startX - 40, bottomY + 10);
    
    // Set font for the caption "图 1"
    // Using common fonts for Chinese characters as a fallback
    ctx.font = '28px "KaiTi", "SimSun", serif';

    // Draw the caption
    const caption = "图 1";
    const textMetrics = ctx.measureText(caption);
    const captionX = startX + (numSquares * sideLength) / 2 - textMetrics.width / 2;
    const captionY = bottomY + 70;
    ctx.fillText(caption, captionX, captionY);

</script>
</body>
</html>